<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
		
		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
		<script type="text/javascript" src="../../../build/event/event.js" ></script>
		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js"></script>

		<script type="text/javascript" src="../../../build/container/container.js"></script>
		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
		
		<style>
			body { background-color:#eee }
		</style>

		<script>
				YAHOO.namespace("example.container");

				function init() {
					// Build panel1 based on markup
					YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[150,100], width:"250px" } );
					
					var kl = new YAHOO.util.KeyListener(document, { keys:27 },  							
																  { fn:YAHOO.example.container.panel1.hide,
																	scope:YAHOO.example.container.panel1,
																	correctScope:true }, "keyup" ); 
																	// keyup is used here because Safari won't recognize the ESC
																	// keydown event, which would normally be used by default

					YAHOO.example.container.panel1.cfg.queueProperty("keylisteners", kl);
					YAHOO.example.container.panel1.render();

					var kl2 = new YAHOO.util.KeyListener(document, { ctrl:true, keys:89 }, 
																   { fn:YAHOO.example.container.panel1.show, 
																	 scope:YAHOO.example.container.panel1,
																	 correctScope:true } );
					
					kl2.enable();

					YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
					YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
				}

				YAHOO.util.Event.addListener(window, "load", init);
		</script>

	</head>
	<body>

		<div>
			panel1: 
			<button id="show">Show (Ctrl+Y)</button> 
			<button id="hide">Hide (Esc)</button>
		</div>

		<div id="panel1" style="visibility:hidden">
			<div class="hd">KeyListener Example Panel</div>
			<div class="bd">Press [ESC] to dismiss this Panel.</div>
		</div>

	</body>
</html>